<template>
    <div class = "addbasecompile" v-loading = "loading">
           <el-container>
        <el-container>
        <el-main>
          <div class = "topForm">
          <el-breadcrumb separator="/">
                <el-breadcrumb-item style="font-weight: bold;cursor:pointer" :to="{ path: 'Addbase' }">基地管理</el-breadcrumb-item>
                <el-breadcrumb-item style="font-weight: bold;cursor:pointer" @click.native = "goBack">基地项目</el-breadcrumb-item>
                <el-breadcrumb-item>{{title}}</el-breadcrumb-item>
                </el-breadcrumb>
          </div>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="项目名称" prop="title">
                <el-input  v-model="ruleForm.title" autocomplete="off" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item  label="项目权重" prop="weight">
                <el-input
                type="number"
                :rows="3"
                placeholder="请输入权重"
                v-model="ruleForm.weight">
                </el-input>
            </el-form-item>
            <el-form-item  label="项目内容">
             <quill-editor 
                v-model="ruleForm.content"
                class="editor" 
                ref="myQuillEditor" 
                :options="editorOption" 
                @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                @change="onEditorChange($event)"
                >
            </quill-editor>
            </el-form-item>
            <el-form-item style="margin-top:80px;float:right">
                <el-button v-if = "Boole===2" type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button v-if = "Boole===1" type="primary" @click="submitFormone('ruleForm')">修改</el-button>
                <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
            </el-form-item>
            </el-form>
        </el-main>
        </el-container>
           </el-container>
    </div>
</template>
<script>
const toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
		  ['blockquote', 'code-block'],
		  [{'header': 1}, {'header': 2}],               // custom button values
		  [{'list': 'ordered'}, {'list': 'bullet'}],
		  [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
		  [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
		  [{'direction': 'rtl'}],                         // text direction
		  [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
		  [{'header': [1, 2, 3, 4, 5, 6, false]}],
		  [{'color': []}, {'background': []}],          // dropdown with defaults from theme
		  [{'font': []}],
		  [{'align': []}],
		  ['link', 'image', 'video'],
		  ['clean']                                         // remove formatting button
];
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
export default {
    data(){
        var validatetitle = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入名称'));
        } else {
          callback();
        }
      };
      var validateweight = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入权重'));
        } else {
          callback();
        }
      };
      var validatecontent = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入权重'));
        } else {
          callback();
        }
      };
        return{
            baseId:'',
            Boole:2,
            tableData: [],
            loading:false,
            ruleForm: {
            title: '',
            content: '',
            weight: '',
            id:''
            },
            title:'',
            Baseid:'',
            rules: {
            weight: [
                { validator: validateweight, trigger: 'blur' }
            ],
            title: [
                { validator: validatetitle, trigger: 'blur' }
            ],
            content: [
                { validator: validatecontent, trigger: 'blur' }
            ],
            },
            // 文本编辑器
            editorOption: {
              placeholder: '你想说点什么?',
              theme: 'snow',  // or 'bubble'
               modules: {
                        toolbar: {
                           container: toolbarOptions,  // 工具栏
                       },
                      
                  }
              }
        }
    },
    created() {
        this.List()
    },
    methods:{
        //获取数据
        List(){
            this.baseId = this.$route.query.baseId
            console.log(this.baseId)
            // this.Baseid = this.$route.query.form
            let item = this.$route.query.item
            if(item){
                this.Boole = 1
                this.title = '项目修改'
                this.ruleForm = item
            } else {
                this.Boole = 2
                this.title = '项目添加'
                // this.Baseid = this.$route.query.form
            }
        },
        //消息提示
        open(title,content,type) {
        this.$notify({
          title: title,
          message: content,
          type: type
        });
      },
      handleAvatarSuccess(response, file, fileList){
        this.ruleForm.imgId = file.response.data.id
        console.log(this.ruleForm.imgId)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },

      //提交按钮
     submitForm(formName) {
    // console.log(this.$refs.myQuillEditor.quill.getText())
    // console.log(this.$refs.myQuillEditor) //获取到富文本对象
    //这里一定要注意写法,这里获取的是一个Delta对象
    // console.log(this.$refs.myQuillEditor.quill.getContents())
    // console.log(this.$refs.myQuillEditor.quill.getText())
   	// console.log(this.$refs.myQuillEditor.quill.root.innerHTML)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // this.loading = true
            let Add = {
                //所属基地编号
                title:this.ruleForm.title,
                content:this.ruleForm.content,
                baseId:this.baseId,
                weight:this.ruleForm.weight,
            }
            console.log(this.baseId)
            this.$api.Basetoaddordelete.projectadd(Add).then(res => {
                if(res.code === 200){
                  this.loading = false
                  this.open('成功','添加成功','success')
                  this.$router.push(`Addbasethree?baseId=${this.baseId}`)
                } else {
                  this.open('失败','修改失败','warning')
                }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        },
        submitFormone(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let Add = {
                //所属基地编号
                title:this.ruleForm.title,
                content:this.ruleForm.content,
                baseId:this.baseId,
                weight:this.ruleForm.weight,
            }
            console.log(this.baseId)
            this.loading = true
            this.$api.Basetoaddordelete.projectamend(this.ruleForm.id,Add).then(res => {
                if(res.code === 200){
                this.loading = false
                this.open('成功','修改成功','success')
                this.$router.push(`Addbasethree?baseId=${this.baseId}`)
                } else {
                this.open('失败','修改失败','warning')
                }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        },
        // resetForm(formName) {
        //     this.$refs[formName].resetFields();
        // },
        onEditorReady(editor) {}, // 准备编辑器,
        onEditorBlur(){}, // 失去焦点事件
        onEditorFocus(){}, // 获得焦点事件
        onEditorChange(){}, // 内容改变事件

        //后退
        goBack(){
          this.$router.push(`Addbasethree?baseId=${this.baseId}`)
        }
    }
}
</script>
<style scoped>
    .addbasecompile .topForm{
      padding-bottom:20px;
    }
    .editor {
    line-height: normal !important;
  }
  .editor .edit_container  {
      width: 500px;
  } 
  .quill-editor  {
      height: 250px;
  }
</style>

